import "./index.less";
import { test, addPos, getAllPos, getPosByName, nearbySearch } from "@/api/map";
import { message } from "antd";
import {useEffect } from "react";

const testFn = () => {
  test();
}

/**
 * 添加位置信息：
 * 天安门  116.397444 39.909183
 * 文化宫科技馆 116.3993 39.908578
 * 售票处 116.397283 39.90943
 * 故宫彩扩部 116.398002 39.909175
 */
const addPosFn = async () => {
  const params = {
    name: '故宫彩扩部',
    longitude: '116.398002',
    latitude: '39.909175'
  };
  try {
    const res = await addPos(params);
    if(res.data.code === 200) {
      message.success(res.data.message || '成功')
    }
  } catch (error) {
    message.error(error.message || '数据异常');
  }
}


// 查询所有位置信息
const getAllPosFn = async() => {
  try {
    const res = await getAllPos();
    if(res.data.code === 200) {
      const list = res.data.list || [];
      const info = list.map(item => item.name).toString() || '';
      message.success(info || '空数据')
    }
  } catch (error) {
    message.error(error.message || '数据异常');
  }
}

// 查询指定位置信息
const getPosByNameFn = async() => {
  const params = {
    name: '天安门'
  };
  try {
    const res = await getPosByName(params);
    if(res.data.code === 200) {
      message.success(`${res.data.data.name}的位置信息是：${res.data.data.longitude}、${res.data.data.latitude}`)
    }
  } catch (error) {
    message.error(error.message || '数据异常');
  }
}

// 搜索附近的位置
const nearbySearchFn = async() => {
  const params = {
    longitude: '116',
    latitude: '39',
    radius: 5000
  };
  try {
    const res = await nearbySearch(params);
    if(res.data.code === 200) {
      const list = res.data.list || [];
      const info = list.map(item => item.name).toString() || '';
      drawMap([116.397444, 39.909183], list);
      message.success(info || '空数据')
    }
  } catch (error) {
    message.error(error.message || '数据异常');
  }
}
/**
 * 通过圆心和指定位置显示并画图
 * @param {*} center 圆心位置
 * @param {*} positionList 显示的位置
 */
const drawMap = (center = [116.397444, 39.909183], positionList = [{name: '售票处',longitude: '116.397283', latitude: '39.90943'}]) => {

  const map = new window.AMap.Map('container', {
    resizeEnable: true,
    zoom: 6,
    center
  });
  positionList.forEach(item => {
    var marker = new window.AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [item.longitude, item.latitude],
        anchor: 'bottom-center'
    });
    map.add(marker);
  });
  const circle = new window.AMap.Circle({
      center: new window.AMap.LngLat(center[0], center[1]), // 圆心位置
      radius: 50,
      strokeColor: "#F33",  //线颜色
      strokeOpacity: 1,  //线透明度
      strokeWeight: 3,  //线粗细度
      fillColor: "#ee2200",  //填充颜色
      fillOpacity: 0.35 //填充透明度
  });
  map.add(circle);
  map.setFitView();
}

export default function Map(){
  useEffect(() => {
    drawMap();
  }, []);

  return (
    <div className="map-container">
        <button onClick={testFn}>测试点击获取数据验证接口</button>
        <h3>redis 相关验证接口</h3>
        <div className="list">
          <div className="item">
            <h4>添加位置信息</h4>
            <button onClick={addPosFn}>验证接口 /addPos </button>
          </div>

          <div className="item">
            <h4>查询所有位置信息</h4>
            <button onClick={getAllPosFn}>验证接口 /allPos </button>
          </div>

          <div className="item">
            <h4>查询某个位置信息</h4>
            <button onClick={getPosByNameFn}>验证接口 /pos </button>
          </div>

          <div className="item">
            <h4>搜索附近的位置</h4>
            <button onClick={nearbySearchFn}>验证接口 /nearbySearch </button>
          </div>
        </div>
        <div id="container"></div>
    </div>
  );
};
